<template>
  <div class="scale-slider">
    <a-select size="small" class="select" :value="dataStore.scaleValue" @change="onScaleChange">
      <template  v-for="i in 20">
          <a-select-option v-if="i > 2" :key="i" :value="i * 10"  size="small">{{i * 10}}</a-select-option>
      </template>
    </a-select>
    <a-icon class="icon-slider minus" type="minus" @click="chageValue(false)" />
    <a-slider 
      class="slider"
      size="small"
      :min="minSlider"
      :max="maxSlider"
      :value="sliderValue"
      :tooltip-visible="false"
      @change="onSliderChange"
    />
    <a-icon class="icon-slider plus" type="plus" @click="chageValue(true)" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Store from '@/store/modules/visualization'

@Component({
  components: {
  }
})
export default class ScaleSlider extends Vue {

  private minScale: number = 30
  private maxScale: number = 200
  private minSlider: number = 0
  private maxSlider: number = 100
  private sliderValue: number = 0

  public get dataStore() {
    return Store
  }
  public created() {
    this.sliderValue = this.convertScaleToSlider(Store.scaleValue)
  }
  chageValue(isAdd:boolean){
    let value = this.dataStore.scaleValue + 5 * (isAdd? 1 : -1)
    if(value < 10){
      value = 10
    } else if(value > this.maxScale){
      value = this.maxScale
    }
    Store.setScaleValue(value)
    this.sliderValue = this.convertScaleToSlider(value)
  }
  public onSliderChange(value:number) {
    const mappingValue = this.convertSliderToScale(value)
    this.sliderValue = value
    Store.setScaleValue(mappingValue)
  }


  public onScaleChange(value: number) {
    this.sliderValue = (value - this.minScale) / (this.maxScale - this.minScale) * (this.maxSlider - this.minSlider)
    Store.setScaleValue(value)
  }

  public convertSliderToScale(value: number):number {
    return Math.round((value * (this.maxScale - this.minScale)) / (this.maxSlider - this.minSlider)) + this.minScale
  }

  public convertScaleToSlider(value: number): number {
    const mappingValue = Math.round((value * (this.maxSlider - this.minSlider)) / (this.maxScale - this.minScale)) + this.minSlider
    return mappingValue
  }
}
</script>

<style lang="less" scoped>
.scale-slider {
  align-content: center;
  align-items: center;
  display: flex;
  flex-flow: row nowrap;

  .select {
    margin-right: 8px;
    width: 70px;
  }

  .slider {
    margin-left: 5px;
    transform: translateY(-2px);
    width: 80px;
  }

  .icon-slider {
    color: #5d637e;
    font-size: 14px;
    margin: 0 5px;

    &:hover {
      color: #5561ff;
    }
  }
}

</style>
